<template>
 <section class="progress-section clearfloat">
     <div>
        <div :style="'height:'+height+'px;line-height:'+height+'px;color:#000;vertical-align:middle'">{{name}}</div>
         <div :style="'height:'+height+'px;line-height:'+height+'px;color:#000;text-align:center;width:120px;vertical-align:middle'">{{currentVal}}</div>
         <div :style="style"></div><el-button style="float:right;vertical-align:middle" type="primary" size="small" @click="showDetail">{{$t('message.details')}}</el-button>
     </div>
 </section>
</template>
<script>
import $ from 'jquery'
import {GloabFun,HttpServer}from '../assets/js/common.js'
  export default {
        data() {
             return {
               green:'#13CE66',
               blue:'#20A0FF',
               red:'#FF4949',
               style:''
             };
         },
         props:{
            height:{
              type:Number,
              default:function(){
                 return 28;
              }
            },
            maxVal:{
              type:Number,
              reauired:true
            },
            currentVal:{
              type:Number,
              reauired:true
            },
            radius:{
              type:Number,
              default:function(){
                 return 0;
              }
            },
            name:{
              type:String,
              reauired:true
            },
            obj:{
              type:Object,
              default:function(){
                 return {};
              }
            }/*,
            hasTitle:{
              type: Boolean,
              default:function(){
                 return false;
              }
            }*/
         },
         methods: {
           showDetail(){
             this.$emit("showDetail",this.obj);
           }
         },
         created(){
            var prcess=this.currentVal/this.maxVal,color='';
            if(prcess<=0.3333){
               color=this.blue;
            }else if(prcess<=0.6666){
               color=this.green;
            }else{
               color=this.red;
            }
            this.style="background-color:"+color+";height:"+this.height+"px;width:"+prcess*100+"%;border-radius:"+this.radius+"px;line-height:"+this.height+"px;max-width:calc(100% - 50px);display:inline-block;text-align:center;color:#000;vertical-align:middle";
            this.$nextTick(function(){
               /*$(".progress-section").hover(function(){
                 $(this).addClass("active");
               },function(){
                 $(this).removeClass("active");
               })*/
            });
         }
 };
</script>
<style lang="less">
  .progress-section{
     margin:0;
     padding:5px 0;
     border-bottom: 1px solid #dfe6ec;
     >div{
       display: table;
       table-layout: fixed;
       width:100%;
     }
     >div{
       >div{
         display: table-cell;
       }
       >div:first-child{
         /* text-align: right; */
         /* padding-right:10px; */
         width:130px;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
         -o-text-overflow:ellipsis;
       }
       >div:last-child{
         width:100%;
       }
     }
     
  }
</style>